{% extends "layouts/baseview.html" %}
{% load i18n %}
{% load short_uri %}

{%block title%}开源{%endblock%}
 
 
 {% block extrascript %}
<link rel="stylesheet" href="/css/new_open.css" />
 <link rel="stylesheet" href="http://www.aliway.com/css/reset.css?t=20130219v1" />


    	
   

{% endblock %}

{%block ready_js%}
     $('#btn-search1').click(function () {
        	$('#prj-search-form #q').val($('#key-text').val());
        	$('#prj-search-form').submit();
            });
    	
        $(".os-project-item").mouseover(function(){
            $(this).addClass("hover");
        });
        $(".os-project-item").mouseout(function(){
            $(this).removeClass("hover");
        });

{%endblock%}

  {%block main-block%}
 


 <body>
 
    <!--页面css-->
    <style>
        body {
            font: 12px/1.5em 'Microsoft Yahei',Arial,SimSun, 'Hiragino Sans GB', STXihei, sans-serif;
            -webkit-font-smoothing: subpixel-antialiased;
        }
		.os-banner-taocode{float: left;
		width: 330px;
		height: 148px;
		margin-left: 300px;
		text-indent: -999em;}        
        
        
        /** 分页样式 Start **/
        .pagination{clear:both;}
        .pagination a.pg-item, .pagination a.pg-item:link, .pagination a.pg-item:visited,
        .pagination a.pg-prev, .pagination a.pg-prev:link, .pagination a.pg-prev:visited,
        .pagination a.pg-next, .pagination a.pg-next:link, .pagination a.pg-next:visited {
            color: #333;
        }
        .pagination a.pg-item:hover, .pagination a.pg-item:active,
        .pagination a.pg-prev:hover, .pagination a.pg-prev:active,
        .pagination a.pg-next:hover, .pagination a.pg-next:active {
            color: #333;
        }
        .pagination a.pg-disabled, .pagination .pg-skip,
        .pagination a.pg-disabled:link, .pagination a.pg-disabled:hover,
        .pagination a.pg-disabled:visited, .pagination a.pg-disabled:active {
            color: #999;
        }
        .pagination {
            text-align: center;
            margin: 10px 0;
        }
        .pagination .pg-item,
        .pagination .pg-prev, .pagination .pg-next, .pagination .pg-item {
            margin-left: 4px;
            vertical-align: middle;
        }
        .pagination a:hover {
            text-decoration: none;
        }

        .pagination .pg-prev, .pagination .pg-next, .pagination .pg-item {
            display: inline-block;
            *display: inline;
            *zoom: 1;
            border: 1px solid #bfbfbf;
            background-color: #f5f5f5;
            padding: 3px 8px;
        }
        .pagination a.pg-prev, .pagination a.pg-next, .pagination a.pg-item {
            cursor: pointer;
        }

        .pagination .pg-prev:hover, .pagination .pg-next:hover {
            border-color: #c7e5ff;
        }

        .pagination .pg-prev:active, .pagination .pg-next:active {
            border-color: #2f96ff;
        }

        .pagination .pg-current {
            background-color: #68b318;
            font-weight: bold;
            color: white;
            border-color: #60a616;
        }
        .pagination a.pg-item:hover, .pagination a.pg-item:active,
        .pagination .pg-prev:hover, .pagination .pg-prev:active,
        .pagination .pg-next:hover, .pagination .pg-next:active {
            border-color: #60a616;
            background-color: #f5f5f5;
        }

        .pagination .pg-disabled,
        .pagination .pg-disabled:link, .pagination .pg-disabled:hover,
        .pagination .pg-disabled:visited, .pagination .pg-disabled:active {
            background-color: #f4f4f4;
            border-color: #ddd;
            cursor: text;
        }

        .pagination .pg-skip .pg-jump {
            margin-right: 4px;
            padding: 3px 8px;
            border: 1px solid #ddd;

        }
        /** 分页样式 End **/
        .section{
            height:127px;
            float:none;
        }
        .section .header .subnav{
            margin: 8px 0 0px 0;
            background:url(http://img02.taobaocdn.com/tps/i2/T1.Ud_XzpdXXXDnL6a-21-97.png) 0px 0px repeat-x;
            height:97px;
        }
        .section .header .subnav .sec{
            height:97px;
        }
        .os-content {
            width: 980px;
            margin: 0 auto;
        }
        .os-nav{
            height: 23px;
            padding-top:2px;
            background-color: #cc6601;
            position: relative;
            top: -25px;
            clear: both;
            width: 980px;
            margin: 0px auto -10px auto;
        }
        .os-nav li{
            float:left;
            padding:3px 8px;
        }
        .os-nav li.current{
            background-color:#fff;
        }
        .os-nav li.current a{
            color:#003300;
        }
        .os-nav li a{
            color:#fff;
        }
        .os-banner{
            height:150px;
            background:url(http://img02.taobaocdn.com/tps/i2/T14RJ.XqVfXXbIK96R-1263-150.jpg) center top no-repeat;
        }
        .os-banner .os-banner-content{
            width:980px;
            margin:0px auto;
        }
        .os-banner .os-banner-content div{
            width:300px;
            height:150px;
            float:right;
            background:url(http://img01.taobaocdn.com/tps/i1/T16VybXpRXXXahT_rS-300-150.png) no-repeat;
            text-align:center;
        }
        .os-iwhat{
           display: block;
           width: 160px;
           height: 40px;
           text-indent: -999em;
           margin-top: 50px;
           margin-left: 63px;
           margin-bottom: 15px;
           background:url(http://img04.taobaocdn.com/tps/i4/T1VEl.XvXeXXaH7y2e-160-40.png)no-repeat;
        }
        .os-sort{
            padding:15px 0px;
            float:left;
            clear:both;
        }
        .os-sort input{
            width: 250px;
            height: 30px;
            border: 1px solid #ededed;
            border-right: none;
            line-height:30px;
            padding-left:3px;
            vertical-align: middle;
        }
        .os-search{
            background: url(http://img03.taobaocdn.com/tps/i3/T1nYd.XstgXXcOGEPi-55-37.jpg) 0px -3px no-repeat;
            width: 55px;
            float: left;
            height: 37px;
            outline: none;
            text-indent:-999em;
        }
        .os-project-list{
             float:left;
             margin-right:-100px;
             clear:both;
             width:980px;
        }
        li.os-project-item{
            background:url(http://img02.taobaocdn.com/tps/i2/T1Rk1XXCtaXXcssfvr-4-8.jpg);
            width:485px;
            height:159px;
            float:left;
            margin:0px 0px 10px 0px;
            color:#b3b3b3;
            line-height: 24px;
            position:relative;
        }
        li.os-project-item div{
            padding:15px;
        }
        .os-project-name{
            color: #f28f4b;
            font-weight: 700;
            font-family:"微软雅黑";
            font-size:20px;
            width: 455px;
            height: 27px;
            overflow: hidden;
            white-space: nowrap;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
        }
        .os-project-owner{
            color:#666666;
            margin-left:10px;
        }
        .os-project-member{
            width: 455px;
            overflow: hidden;
            height: 24px;
            white-space: nowrap;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
            padding:10px 0px;
            background:url(http://img04.taobaocdn.com/tps/i4/T1fqh0XBxgXXayrnTg-455-2.png) no-repeat bottom center;
            margin-bottom:10px;
        }
        .os-project-partintro{
            height:48px;
            overflow:hidden;
        }
        .os-project-allintro{
            display:none;
        }
        .os-project-seeall{
            color:#ec8d4d;
        }
        .os-project-list li:hover,.os-project-list li.hover{
            background-color:#fff;

        }
        .os-project-list li:hover div,.os-project-list li.hover div{
            border:1px solid #fff;

        }
        .os-project-list li:hover .os-project-member,.os-project-list li.hover .os-project-member{
            height:auto;
            white-space:normal;

        }
        .os-project-list li:hover,.os-project-list li.hover{
            z-index:89;
        }
        .os-project-list li:hover div,.os-project-list li.hover div{
            position:top;
            top:0px;
            left:0px;
            z-index:900;
            height:auto;
            background-color:#fff;
            border:1px solid #fcfcfc;
            border-left:1px solid #f4f4f4;
            _border:1px solid #f4f4f4;
            -webkit-box-shadow: rgb(102, 102, 102) 2px 2px 3px;
            box-shadow: rgb(153, 153, 153) 2px 2px 3px;
        }
        .os-project-list li:hover .os-project-allintro,.os-project-list li.hover .os-project-allintro{
            display:block;
        }
        .os-project-list li:hover .os-project-partintro,.os-project-list li.hover .os-project-partintro{
            display:none;
        }
    </style>

    <div class="os-banner">
        <div class="os-banner-content">
         <a href="http://code.taobao.org" class="os-banner-taocode" target="_blank">Taocode</a>
            <div style="">
                <a href="/new/" class="os-iwhat">我要开源</a>
                <p>阿里集团已有</p>
                <p><strong>{{projectCount}}</strong>个开源项目，<strong>{{peopleCount}}</strong>位开源人</p>
            </div>
        </div>
    </div>
    <div class="os-content">
    
    <form id="prj-search-form" action="/opensources/" method="POST">
      {%csrf_token%}
      <input id="q" name="q" type="hidden" value="{{key_text}}"></input>
    </form>
    
        <div class="os-sort"><span style="float:left;">搜项目：<input type="text" id="key-text" value="{{key_text}}" /></span> <a id="btn-search1" href="javascript:;" class="os-search">搜索</a></div>
        <ul class="os-project-list">
        {%for ali in opensources%}
            <li class="os-project-item">
                <div>
                	{%if ali.svnurl.strip%}
                		<a href="{{ali.svnurl}}" target="_blank" class="os-project-name">{{ali.subject}}</a>
                	{%else%}
                		{%if ali.siteurl.strip%}
                			<a href="{{ali.siteurl}}" target="_blank" class="os-project-name">{{ali.subject}}</a>
                		
                		{%else%}
                			<ul class="os-project-name">{{ali.subject}}</ul>
                		{%endif%}
                	{%endif%}
                    <p class="os-project-member">
                        <span>成员：</span>
                        {% for key, value in ali.ownerDict.items%}
                        	<span class="os-project-owner">{{key}}</span>
                        {%endfor%}
                        {%for key, value in ali.usersDict.items%}
                        	<span class="os-project-owner">{{key}}</span>
                        {%endfor%}
                 
                    </p>
                    <p class="os-project-partintro">
                        <span>简介：</span>
                        <span>{{ali.content|truncatechars:60}}...
                              <a href="" target="_blank" class="os-project-seeall">查看详情</a>
                        </span>
                    </p>
                    <p class="os-project-allintro">
                        <span>简介：</span>
                        <span>{{ali.content}}
                        </span>
                    </p>
                </div>
            </li>
        {%endfor%}  
        </ul>
         {% include "layouts/page-nav.html" %}
    </div>

</body>
{%endblock%}
